<template>
  <el-dialog :visible.sync="basicData" :close-on-click-modal="false" :append-to-body="true"
    :title="modealType == 1 ? '直销客户基础资料导入' : '经销客户基础资料导入'" width="60%" @close="operation">
    <div class="pr15 pl15">
      <div class="header_cancel mb15">
        <div>
          <!-- <img src="@/assets/images/icon/template.png" alt=""> -->
          <span>下载模板</span>
        </div>
        <div>
          <!-- <img src="@/assets/images/icon/upload_a_file.png" alt=""> -->
          <span>上传文件</span>
        </div>
        <div>
          <!-- <img src="@/assets/images/icon/Import_data.png" alt=""> -->
          <span>导入数据</span>
        </div>
        <div>
          <!-- <img src="@/assets/images/icon/Import_success.png" alt=""> -->
          <span>导入成功</span>
        </div>
      </div>
      <div class="conter_text">
        <p>
          一、请按照数据模板的数据格式准备需要导入的数据。
          <span class="c409EFF hand" @click="download">点击下载《客来云-{{
            modealType == 1 ? "直" : "经"
          }}销客户基础资料数据模板》</span>
        </p>
        <p class="ml25">导入文件请勿超过2M</p>
        <p>二、导入数据要求说明和部分数据来源下载。</p>
        <p class="ml25">(1) 每次导入数据时，仅能导入同一公司的数据</p>
        <p class="ml25">(2) 同一个公司仅有一个业态标识</p>
        <p class="ml25">
          (3) 客户编码由客户自行生成，但仍需按照如下生成规则进行处理
        </p>
        <div class="ml45">
          <p>(a) 业态标识 + 标识字符 + 6位随机字符;</p>
          <p>
            (b)
            标识字符为固定字符“ZX”或“JX”,其中“ZX”为直销客户的标识字符,“JX”为经销的标识字符;
          </p>
          <p>
            (c)6位随机字符的范围为大写英文字符(A~Z,共计26个大写英文字母)和数字(2~9,共计有8个数字);
          </p>
          <p>(d)在同一个公司内,客户编码不能重复。</p>
          <p>如果未按照规则生成客户编码，该条客户资料将不能导入系统中。</p>
        </div>
        <p class="ml25">
          (4)客户第三方唯一编码为该客户在第三方系统中(如ERP、聚水潭等)系统中的客户编码,该编码在同一个公司内不允许重复;
        </p>
        <p class="ml25">
          (5)客户省市区信息按照《客来云-省市区标准表》中的数据进行填写；
          <span class="c409EFF hand" @click="download('标准表')">点击下载《客来云-省市区标准表》</span>
        </p>
        <p class="ml25">
          (6)客户基本资料中客户来源、客户等级、行业类型为客来云系统的系统默认资料，每个资料均为三级，信息仅可按照《客来云-系统默认资料》进行填写，该部分资料可在《客来云-直销客户基础资料数据模板》中一同下载。
        </p>
        <p class="ml25">
          (7)《客来云-{{
            modealType == 1 ? "直" : "经"
          }}销客户基础资料数据模板》中标“*”的数据为必填项。
        </p>
        <p class="C40007 ml25">
          ！导入数据时，如果数据不符合要求或缺少必填项数据时，会存在跳过该条数据的情况，请谨慎填写数据。
        </p>
        <p class="mb15">三、请选择需要导入的文件</p>
        <el-upload ref="uploadRef" :action="
            modealType == 1 ? uploadExcelDirectUrl : uploadExcelDealersInfoUrl
          " :headers="headers" name="file" :auto-upload="false" :on-success="handleUploadSuccess">
          <template slot="trigger">
            <el-button type="primary">选择文件</el-button>
          </template>
        </el-upload>
      </div>
    </div>
    <template slot="footer">
      <span class="dialog-footer">
        <el-button @click="operation('取消')">取消</el-button>
        <el-button type="primary" @click="operation('确定')">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {
  uploadExcelDirectUrl,
  uploadExcelDealersInfoUrl,
  DirectBasicDataUrl,
  DealerBasicDataUrl,
  regionUrl
} from '@/api/upload';
import { getToken, setToken } from '@/utils/auth';
export default {
  name: 'Channel',
  props: {
    basicData: {
      type: Boolean,
      default: false
    },
    modealType: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      uploadExcelDirectUrl,
      uploadExcelDealersInfoUrl,
      headers: {
        'Auth-Key': getToken('auth_key') ? getToken('auth_key') : '',
        'Session-Id': getToken('session_id') ? getToken('session_id') : '',
        Platform: 'pc'
      }
    };
  },
  methods: {
    download () {
      const loading = this.$loading({
        lock: true,
        text: '下载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let a = document.createElement('a');
      a.setAttribute(
        'href',
        this.modealType == 1 ? DirectBasicDataUrl : DealerBasicDataUrl
      );
      a.setAttribute(
        'download',
        this.modealType == 1 ? DirectBasicDataUrl : DealerBasicDataUrl
      );
      a.click();
      setTimeout(() => {
        loading.close();
      }, 1000);
    },
    regionDownload () {
      const loading = this.$loading({
        lock: true,
        text: '下载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let a = document.createElement('a');
      a.setAttribute('href', regionUrl);
      a.setAttribute('download', regionUrl);
      a.click();
      setTimeout(() => {
        loading.close();
      }, 1000);
    },
    operation (option) {
      if (option == '确定') {
        this.$refs.uploadRef.submit();
      } else {
        this.$emit('channelDialog', option);
      }
    },
    // 上传成功
    handleUploadSuccess (res, file, fileList) {
      console.log('上传成功回调', res, file, fileList);
      if (res) {
        // console.log(res);
        if (res.code === 200) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      } else {
        this.$message.error(res.msg);
      }
      this.$refs.uploadRef.clearFiles();
      this.$emit('channelDialog');
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep.el-overlay-dialog {
  background: #efefef;
}
::v-deep.el-dialog__body {
  border-top: 1px solid #efefef;
}
::v-deep.el-dialog {
  height: calc(100vh - 50px);
}
.conter_text {
  p {
    padding: 5px 0;
  }
}
.header_cancel {
  height: 80px;
  background: rgba(215, 215, 215, 1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 5px;
  div {
    display: flex;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }
}
</style>
